<template>
  <div class="dialog-container">
    <div class="tool dhtgac" @click="stopConversation">
      <img src="@/images/dhtj.png" alt="" class="normal" />
      <img src="@/images/dhtjac.png" alt="" class="active" />
    </div>
    <img src="@/images/dhk.png" alt="对话背景" class="dhkbj" />
    <!-- 对话显示区域 -->
    <div class="messages" ref="messagesContainer">
      <div
        v-for="(message, index) in conversation"
        :key="index"
        :class="[
          'message',
          message.role === 'user1' ? 'user1-message' : 'user2-message'
        ]"
      >
        <div class="avatar">
          <img
            :src="
              message.role === 'user1'
                ? require('@/images/护士.png')
                : require('@/images/患者.png')
            "
            alt="角色头像"
          />
        </div>
        <div class="content">
          {{ message.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AutoDialog',
  data() {
    return {
      // 角色名称
      character1: '医生',
      character2: '患者',

      // 对话内容 - 存储在data中的预设对话
      conversationScripts: [
        {
          role: 'user1',
          text: '你好，请问你是做CT颅脑检查吗',
          raido: require('@/images/radio/医生1.mp3')
        },
        {
          role: 'user2',
          text: '是的',
          raido: require('@/images/radio/患者1.mp3')
        },
        {
          role: 'user1',
          text: '请问您叫什么名字？',
          raido: require('@/images/radio/医生2.mp3')
        },
        {
          role: 'user2',
          text: '杨丽丽',
          raido: require('@/images/radio/患者2.mp3')
        },
        {
          role: 'user1',
          text: '请问您多大年龄？',
          raido: require('@/images/radio/医生3.mp3')
        },
        {
          role: 'user2',
          text: '29岁',
          raido: require('@/images/radio/患者3.mp3')
        },
        {
          role: 'user1',
          text: '请您到更衣室把身上的金属物品摘下，更换衣服准备检查',
          raido: require('@/images/radio/医生4.mp3')
        },
        {
          role: 'user2',
          text: '好的',
          raido: require('@/images/radio/患者4.mp3')
        }
      ],

      // 当前显示的对话
      conversation: [],

      // 对话控制变量
      currentStep: 0,
      isRunning: false,
      conversationInterval: null
    }
  },
  methods: {
    // 开始对话
    startConversation() {
      if (this.isRunning) return

      this.isRunning = true

      // 如果是第一次开始，先显示第一条消息
      if (
        this.conversation.length === 0 &&
        this.conversationScripts.length > 0
      ) {
        this.showNextMessage()
      }

      //   // 设置定时器，自动显示下一条消息
      //   this.conversationInterval = setInterval(() => {
      //     this.showNextMessage()
      //   }, 2000) // 每条消息间隔2秒
    },

    // 显示下一条消息
    showNextMessage() {
      if (this.currentStep < this.conversationScripts.length) {
        // 添加下一条消息
        this.$emit('bfhzdh', this.conversationScripts[this.currentStep])

        this.conversation.push(this.conversationScripts[this.currentStep])

        // 只保留最新的一条消息
        if (this.conversation.length > 1) {
          this.conversation.shift() // 删除数组的第一个元素
        }

        // 自动滚动到底部
        // this.scrollToBottom()
      } else {
        this.$emit('taskfn', 2.1)
        // 对话结束

        this.stopConversation()
      }
      this.currentStep = this.currentStep + 1
    },

    // 停止对话
    stopConversation() {
      if (this.conversationInterval) {
        clearInterval(this.conversationInterval)
        this.conversationInterval = null
      }
      this.isRunning = false
      this.$emit('taskfn', 2.1)
    },

    // 重置对话
    resetConversation() {
      this.stopConversation()
      this.conversation = []
      this.currentStep = 0
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messagesContainer
        if (container) {
          container.scrollTop = container.scrollHeight
        }
      })
    }
  },
  mounted() {
    this.startConversation()
  },
  // 组件销毁时清除定时器
  beforeDestroy() {
    // this.stopConversation()
  }
}
</script>

<style scoped>
.dialog-container {
  width: 554px;
  height: 158px;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.messages {
  width: 554px;
  height: 158px;
  padding: 10px 20px;
  padding-top: 20px;
  box-sizing: border-box;
  overflow-y: hidden; /* 允许滚动，当内容超过高度时 */
}

.dhkbj {
  width: 554px;
  height: 158px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1; /* 确保背景在内容下方 */
}

.message {
  display: flex;
  animation: fadeIn 0.5s ease forwards;
  margin-bottom: 10px;
}

.user1-message {
  align-self: flex-start;
  margin-top: 30px;
}

.user2-message {
  margin-left: auto;
  margin-top: 40px;
  flex-direction: row-reverse;
}

.avatar {
  width: 43px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: -10px;
  flex-shrink: 0;
}
.avatar img {
  width: 43px;
  height: 54px;
}
.user2-message .avatar {
  margin-right: 0;
  margin-left: -10px;
}
.content {
  height: auto; /* 自动高度适应内容 */
  min-height: 41px; /* 保持最小高度 */
  margin-top: 10px;
  padding: 8px 15px;
  box-sizing: border-box;
  border-radius: 0px 10px 10px 0px;
  position: relative;
  font-size: 18px;
  color: #383b50;
  background: linear-gradient(-90deg, #d8ddf6 80%, rgba(216, 221, 246, 0) 100%);
  display: flex;
  align-items: center;
}

.user2-message .content {
  border-radius: 10px 0px 0px 10px;
  background: linear-gradient(90deg, #d8f6f6 80%, rgba(216, 239, 246, 0) 100%);
  display: flex;
  align-items: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dhtgac {
  width: 82px;
  height: 40px;
  position: absolute;
  top: 5px;
  right: 10px;
}
.dhtgac img {
  width: 82px;
  height: 40px;
}
</style>
